<!DOCTYPE html>
<!--doctype文档格式 -->
<html>
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        main{
            width: 200px;
            height: 200px;
            border: 10px solid #333;
            /*border-width: 10px;
            border-style: solid;
            border-color: #333;*/
            /*solid 实线 dashed 虚线 dotted 点状线 double 双实线*/
            /*border-top: */
            /*border-bottom: */
            /*border-left: */
            /*border-right: */

             margin: 100px;
             /*margin-top: */
             /*margin-bottom: */
             /*margin-left: */
             /*margin-right: */
             margin: 50px 100px;
             /*      上下   左右   */
             margin: 50px 100px 150px;
             /*      上   左右    下   */
             margin: 50px 100px 150px 200px;
             /*      上    右    下     左   */
             /*顺时针 影响的是元素在文档的位置*/
             
             margin: 0 auto;
             /*margin: 0 auto 0;
             margin: 0 auto 0 auto;*/
             /*定宽居中*/

             padding: 40px;
             /*padding-top: */
             padding: 40px 50px;
             /*       上下  左右  */
             padding: 40px 50px 60px;
             /*       上   左右   下   */
             padding: 40px 50px 60px 70px;
             /*       上    右   下   左   */
             /*顺时针 影响的是内容距离边框的大小*/

             box-sizing: border-box;
             /*盒子模型 默认是content-box*/
        }
    </style>
</head>
<body>
    <main>这是main元素</main>
</body>
</html>
<!--盒模型 
    margin + border + padding + content
    外边距    边框      内边距    内容  
    w3c规定的是content-box  
-->